:root,
page {
    // 中性色
    --white-color: #fff;
    --black-color: #000;
    --gray-color-1: #f7f9fb;
    --gray-color-2: #f4f5f9;
    --gray-color-3: #eceff5;
    --gray-color-4: #e2e5ed;
    --gray-color-5: #d6dae3;
    --gray-color-6: #c6ccd6;
    --gray-color-7: #b0b9c3;
    --gray-color-8: #949aa5;
    --gray-color-9: #787e87;
    --gray-color-10: #5d6269;
    --gray-color-11: #35383d;
    --gray-color-12: #1c1e20;
    // --gray-color-13: #000000;

    // 主色
    --orange-color-1: #fff7e8;
    --orange-color-2: #ffe4ba;
    --orange-color-3: #ffcf8b;
    --orange-color-4: #ffb65d;
    --orange-color-5: #ff9a2e;
    --orange-color-6: #ff7d00; // 品牌色
    --orange-color-7: #d25f00;
    --orange-color-8: #a64500;
    --orange-color-9: #792e00;
    --orange-color-10: #4d1b00;

    // 蓝色
    --blue-color-1: #e8f7ff;
    --blue-color-2: #bae3ff;
    --blue-color-3: #8bcdff;
    --blue-color-4: #5db3ff;
    --blue-color-5: #2e97ff;
    --blue-color-6: #0076ff;
    --blue-color-7: #005bd2;
    --blue-color-8: #0042a6;
    --blue-color-9: #002c79;
    --blue-color-10: #001a4d;

    // 绿色
    --green-color-1: #e8ffea;
    --green-color-2: #aff0b5;
    --green-color-3: #7be188;
    --green-color-4: #4cd263;
    --green-color-5: #23c343;
    --green-color-6: #00b42a;
    --green-color-7: #009a29;
    --green-color-8: #008026;
    --green-color-9: #006622;
    --green-color-10: #004d1c;

    // 红色
    --red-color-1: #ffece8;
    --red-color-2: #fdcdc5;
    --red-color-3: #fbaca3;
    --red-color-4: #f98981;
    --red-color-5: #f76560;
    --red-color-6: #f53f3f;
    --red-color-7: #cb272d;
    --red-color-8: #a1151e;
    --red-color-9: #770813;
    --red-color-10: #4d000a;

    // 标题、一级文本
    --text-primary: var(--gray-color-12);
    // 二级文本
    --text-secondary: var(--gray-color-10);
    // 说明文本
    --text-tertiary: var(--gray-color-8);
    // 占位符文本、禁用文本
    --text-placeholder: var(--gray-color-7);
    // 反色标题、一级文本
    --text-anti: var(--white-color);

    // 主要容器背景
    --bg-color-container: var(--white-color);
    // 次要容器背景、表头底色
    --bg-color-secondarycontainer: var(--gray-color-1);
    // 默认页面底层背景
    --bg-color-page: var(--gray-color-2);
    // 默认组件分割线
    --component-stroke: var(--gray-color-3);
    // 默认描边
    --component-border: var(--gray-color-5);

    // 主要容器背景hover
    --bg-color-container-hover: var(--gray-color-1);
    // 主要容器背景click
    --bg-color-container-active: var(--gray-color-2);
    // 组件背景hover
    // 主要容器之上组件背景hover
    --bg-color-component-hover: var(--gray-color-1);
    // 组件背景click
    // 主要容器之上组件背景click
    --bg-color-component-active: var(--gray-color-2);
    // 组件背景disabled
    // 主要容器之上组件背景disabled
    --bg-color-component-disabled: var(--gray-color-2);

    // 品牌色、警示色
    --brand-color: var(--orange-color-6);
    // 品牌色 hover、警示色 hover
    --brand-color-hover: var(--orange-color-5);
    // 品牌色 click、警示色 click
    --brand-color-active: var(--orange-color-7);
    // 品牌色 disabled、警示色 disabled
    --brand-color-disabled: var(--orange-color-3);
    // 品牌色 focus、警示色 focus
    --brand-color-focus: var(--orange-color-2);
    // 品牌色 light、警示色 light
    --brand-color-light: var(--orange-color-1);
    // 链接色
    --link-color: var(--blue-color-6);
    // 链接色 hover
    --link-color-hover: var(--blue-color-5);
    // 链接色 click
    --link-color-active: var(--blue-color-7);
    // 链接色 disabled
    --link-color-disabled: var(--blue-color-3);
    // 链接色 focus
    --link-color-focus: var(--blue-color-2);
    // 链接色 light
    --link-color-light: var(--blue-color-1);
    // 错误色
    --error-color: var(--red-color-6);
    // 错误色 hover
    --error-color-hover: var(--red-color-5);
    // 错误色 click
    --error-color-active: var(--red-color-7);
    // 错误色 disabled
    --error-color-disabled: var(--red-color-3);
    // 错误色 focus
    --error-color-focus: var(--red-color-2);
    // 错误色 light
    --error-color-light: var(--red-color-1);
    // 成功色
    --success-color: var(--green-color-6);
    // 成功色 hover
    --success-color-hover: var(--green-color-5);
    // 成功色 click
    --success-color-active: var(--green-color-7);
    // 成功色 disabled
    --success-color-disabled: var(--green-color-3);
    // 成功色 focus
    --success-color-focus: var(--green-color-2);
    // 成功色 light
    --success-color-light: var(--green-color-1);

    // nutui 重定义
    --nutui-overlay-zIndex: 1002;
    --nutui-button-large-height: 80px;
    --nutui-button-large-font-size: 32px;
    --nutui-button-large-border-radius: 10px;
    --nutui-button-square-border-radius: 10px;
    --nutui-button-small-border-radius: 10px;
    --nutui-button-mini-border-radius: 10px;
    --nutui-radio-label-font-size: 30px;
    --nutui-divider-vertical-height: 4px;
    // 默认按钮色
    --nutui-button-default-color: #1c1e20;
    --nutui-button-default-border-color: #d6dae3;
    --nutui-button-default-disabled-color: white;
    --div-border-color: #eceff5; // 分割线颜色

    --nutui-cell-border-radius: 12px;
    --nutui-border-radius: 12px;
    --nutui-cell-padding: 32px;
    --nutui-button-border-radius: 10px;

    // --nutui-navbar-color: #333;
    // --nutui-navbar-title-font-color: #333;

    // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
    --nutui-color-primary: var(--orange-color-6);
    --nutui-color-primary-stop-1: var(--orange-color-5);
    --nutui-color-primary-stop-2: var(--orange-color-6);

    // 蓝色-文件预览颜色
    --nutui-color-blue: var(--link-color);
    --nutui-color-green: var(--green-color-6);

    // 禁用色
    // --nutui-button-primary-disabled: #e0e0e0;
    --nutui-button-primary-disabled: linear-gradient(90deg, #ffe4ba 0%, #ffcf8b 100%);
    --nutui-color-primary-disabled: #ffcf8b;
    --nutui-radio-label-disable-color: #949aa5;
    --nutui-input-disabled-color: #949aa5;

    // 背景色
    --nutui-background-color-1: #ffd8bf;
    --nutui-background-color-2: #fffaf2;
    // 背景渐变色主色
    --nutui-navbar-bg-color-1: rgb(255, 148, 49);
    --nutui-navbar-bg-color-2: rgb(255, 196, 141);

    // 危险色
    --nutui-color-danger: var(--error-color);
    --nutui-color-danger-background: var(--error-color);
    --nutui-notify-danger-background-color: var(--error-color);
    --nutui-form-item-error-message-color: var(--error-color);
    --nutui-form-item-required-color: var(--error-color);

    // toast
    --nutui-toast-inner-bg-color: #ff8e36;
    --nutui-toast-inner-border-radius: 50px;

    --nutui-overlay-bg-color: rgba(0, 0, 0, 0.55);

    // poper
    // --nutui-popover-border-color: red;
    // 默认颜色
    --nutui-font-color: var(--gray-color-12);
    --nutui-gray-1: #fff;
    --nutui-gray-2: #f8f8f8;
    --nutui-gray-3: #f6f6f6;
    --nutui-gray-4: #b0b6c3;
    --nutui-gray-5: #949aa5;
    --nutui-gray-6: #5d6269;
    --nutui-gray-7: #1a1a1a;
    --nutui-black-1: transparent;
    --nutui-black-2: rgba(0, 0, 0, 0.02);
    --nutui-black-3: rgba(0, 0, 0, 0.06);
    --nutui-black-4: rgba(0, 0, 0, 0.1);
    --nutui-black-5: rgba(0, 0, 0, 0.2);
    --nutui-black-6: rgba(0, 0, 0, 0.3);
    --nutui-black-7: rgba(0, 0, 0, 0.4);
    --nutui-black-8: rgba(0, 0, 0, 0.5);
    --nutui-black-9: rgba(0, 0, 0, 0.6);
    --nutui-black-10: rgba(0, 0, 0, 0.7);
    --nutui-black-11: rgba(0, 0, 0, 0.8);
    --nutui-black-12: rgba(0, 0, 0, 0.9);
    --nutui-black-13: #000;

    // noticebar
    --nutui-noticebar-background: var(--nutui-background-color-2);
    --nutui-noticebar-color: var(--nutui-color-primary);
    --nutui-noticebar-line-height: 1.5;

    // navbar
    --nutui-navbar-title-font-size: 28px;
    // --nutui-navbar-title-font-weight: noraml;

    // --nutui-cell-group-wrap-margin: 0;

    --nut-icon-width: 14px;
    --nut-icon-height: 14px;

    // form
    --nutui-form-item-label-width: 200px;
    --nutui-input-disabled-color: var(--nutui-gray-4);
    --nutui-form-item-label-font-size: 30px;
    --nutui-textarea-font: 30px;
    --nutui-input-font-size: 30px;
    --nutui-searchbar-input-height: 80px;
    --nutui-searchbar-content-round-border-radius: 40px;
}
:root,
page,
body {
    height: 100vh;
    font-size: 28px;
    color: var(--nutui-font-color);
    background-color: var(--gray-color-2);
    font-family:
        'PingFang SC', 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
        sans-serif;
    box-sizing: border-box;
    // font-weight: 400;
    .iconfont {
        font-size: 38px;
    }
}

.nut-tag {
    text-align: center;
    padding: 0 20px !important;
    height: 40px !important;
    border-radius: 20px !important;
    .nut-tag-text {
        font-size: 24px !important;
        height: 24px;
        overflow: hidden;
        line-height: 1;
    }
    &.nut-tag-info {
        background: var(--blue-color-1);
        color: var(--blue-color-8);
    }
    &.nut-tag-danger {
        background: var(--red-color-1);
        color: var(--red-color-8);
    }
    &.nut-tag-default,
    &.nut-tag-warning {
        background: var(--orange-color-1);
        color: var(--orange-color-8);
    }
    &.nut-tag-success {
        background: var(--green-color-1);
        color: var(--green-color-8);
    }
}